<style scoped>
  .clientRepair {
    margin-right: 0.5vw;
    padding: 0 15px;
    background-color: white;
    height: 95vh;
    position: relative;
  }
  .cR_top{
    display: flex;
    padding: 1.5vh 0;
    border-bottom: 2px solid #f4f4f4;
    white-space:nowrap;
  }
  .jl{
    margin: 3px 6px 0 0;
  }
  ._input{
    width: 8vw;
    height: 30px;
  }
  .cR_top>p:not(:first-child){
    line-height: 30px;
    margin: 0 10px;
  }
  .cR_button{
    padding: 1.5vh 0;
  }
  .cR_bottom{
    width: 100%;
    height: 78%;
    /* border-bottom: 1px solid black; */
    display: flex;
  }
  .cR_left{
    width: 35%;
    border-right: 1px solid #f4f4f4;
    padding-right: 15px;
    height: 81vh;
  }
  .cR_right{
    width: 65%;
    /* border: 1px solid black; */
    padding-left: 15px;
  }
  .footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }
  .footView span i{
    margin-right: 5px;
  }
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    z-index: 9;
  }
</style>

<style>
  .clientRepair .el-input__icon{
    line-height: 30px;
  }
  .clientRepair .build-info-4 .el-input__inner{
    height: 30px;
    border: 0px;
  }
  .clientRepair .build-info-4 .el-input__inner:focus{
    border: 1px solid #017aff;
  }

  .clientRepair .cR_top .el-input__inner{
    height: 30px;
    width: 8vw;
  }
  .clientRepair .cR_top .sty .el-input__inner{
    width: 60px;
    margin-right: 10px;
  }
  .clientRepair .cR_top .sty1 .el-input__inner{
    width: 100px;
  }
  .clientRepair .cR_top .el-checkbox.is-bordered{
    padding: 4px 7px 0px 7px;
    height: 30px;
  }
  .clientRepair .cR_top .el-checkbox:last-of-type{
    margin-right: 10px;
  }
  .clientRepair .cR_top .el-checkbox__inner{
    border-radius: 15px;
  }

  .clientRepair .sty2 .el-input__inner,.clientRepair .sty2  .el-input{
    width: 8vw;
    height: 30px;
  }
  .clientDiclientRepairstribution .sty2 .el-date-editor.el-input,.clientDiclientRepairstribution .sty2 .el-date-editor.el-input__inner{
    width: 8vw;
  }
  .clientRepair .sty2 .el-input__icon{
    line-height: 32px;
  }

  .clientRepair .el-cascader .el-input {
    height: 30px;
  }
  .clientRepair .el-cascader .el-input__inner{
    height: 30px!important;
    width: 8vw;
  }
  .clientRepair .el-cascader__tags .el-tag{
    max-width: 55%;
  }
</style>

<template>
  <div class="clientRepair">
    <div class="cR_top">
      <p class="jl">客户编号</p>
      <div class="sty">
        <el-input v-model="customerNo" @blur="customerNoBlur" :disabled="jxAgent"></el-input>
      </div>
      <div class="sty1">
        <el-select v-model="customerName" @change="e=>{this.customerNo=e}" :disabled="jxAgent">
          <el-option
            v-for="item in customerList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float:left">{{item.value}}</span>
            <span style="float:right">{{item.label}}</span>
          </el-option>
        </el-select>
      </div>

      <p>货号</p>
      <el-input v-model="kindsNumber" class="_input"></el-input>
      <!-- <el-cascader collapse-tags clearable v-model="kindsNumber" :options="kindsNumberList" :props="props"></el-cascader> -->

      <p>录单日期</p>
      <div class="sty2">
        <el-date-picker
          v-model="inputDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      
      <p>操作方式</p>
      <el-select v-model="operatingMode" class="_input" clearable>
        <el-option
          v-for="item in operatingModeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <p>售价</p>
      <el-input class="_input" v-model="sellingPrice"></el-input>

      <p>备注</p>
      <el-input class="_input" v-model="remark"></el-input>
    </div>

    <div class="cR_button">
      <el-button @click="()=>{this.showRepair = true}" type="primary" icon="el-icon-plus">新建</el-button>
      <el-button @click="search" icon="el-icon-search">查询</el-button>
      <el-button @click="modify" icon="el-icon-folder-checked">修改</el-button>
    </div>

    <div class="cR_bottom">
      <div class="cR_left">
        <el-table
          show-summary
          ref="table"
			    :summary-method="getSummaries"
          height="81vh"
          :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
          :cell-style="{padding:0,height:'36px'}"
          :data="tableData1"
          style="width: 100%">
          <el-table-column
            prop="time"
            label="异动日"
            width="100">
          </el-table-column>
          <el-table-column
            prop="customerNo"
            label="客户编码"
            width="80">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="客户简称"
            width="100">
          </el-table-column>
          <el-table-column
            prop="kindsNumber"
            label="货号">
          </el-table-column>
          <el-table-column
            prop="outNumber"
            label="退回"
            width="60">
          </el-table-column>
          <el-table-column
            prop="returnNumber"
            label="归还"
            width="60">
          </el-table-column>
        </el-table>
      </div>

      <div class="cR_right">
        <el-table
          :data="tableData2"
          height="81vh"
          :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
          :cell-style="{padding:0,height:'36px'}"
          highlight-current-row
          style="width: 100%"
          @row-click="rowClick">
          <el-table-column
            prop="type"
            label="类别"
            width="60">
          </el-table-column>
          <el-table-column
            prop="time"
            label="日期"
            width="120">
          </el-table-column>
          <el-table-column
            prop="customerNo"
            label="客编"
            width="60">
          </el-table-column>
          <el-table-column
            prop="kindsNumber"
            label="货号"
            width="130">
          </el-table-column>
          <el-table-column
            prop="colorNameSize"
            label="色码">
          </el-table-column>
          <el-table-column
            prop="sellingPrice"
            label="售价">
          </el-table-column>
          <!-- <el-table-column
            prop="sellingPriceOne"
            label="售价2">
          </el-table-column> -->
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="160">
          </el-table-column>
          <el-table-column
            prop="operator"
            label="操作员"
            width="100">
          </el-table-column>
          <el-table-column
            prop="enteringTime"
            label="录入时间"
            width="160">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <re-pair
      v-show="showRepair"
      :sendData="sendData"
      :show="showRepair"
      @saveRepair="saveRepair"
      @closeRepair="()=>{this.showRepair = false}"
      @inpNumChange="()=>{this.inpList = this.getInput()}">
    </re-pair>

    <!-- <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
      </div>
    </foot-view> -->
  </div>
</template>

<script>
import footView from '../../../components/FootView'
import rePair from './childcomp/Repair'

import enterUp from '../../../components/mixins/enterUp'

import { getCustomerRepair, update } from '../../../network/customerRepair'
import { getClient } from '../../../network/client'
import { getArtNo } from '../../../network/artNo'

export default {
  name: 'client_repair',
  mixins: [enterUp],
  components:{
    footView,
    rePair
  },
  data(){
    return{
      inpList: [],
      props: { multiple: true },

      sendData: {},

      showRepair: false,
      customerNo: '',
      customerName: '',
      customerList: [],
      kindsNumber: '',
      kindsNumberList: [],
      inputDate: null,
      operatingMode: '退回',
      operatingModeList: [
        {value:'退回',label:'退回'},
        {value:'归还',label:'归还'},
      ],
      sellingPrice: '',
      remark: '',
      tableData1: [],
      tableData2: [],

      tmpData: {},
      jxQuarter: null,
      jxAgent:null,
      operator:null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
      // jxAgent: document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))[1] == 1 ? true : false,
      // operator: document.cookie.match(RegExp('jxUser'+'=([^;]+)'))[1]
    }
  },
  watch: {
    inputDate(a,b){
      this.newSend()
    },
    customerNo(a,b){
      this.customerNo = a.toUpperCase().trim()
      this.newSend()
    },
    operatingMode(a,b){
      this.newSend()
    },
    sellingPrice(a,b){
      this.newSend()
    },
    remark(a,b){
      this.newSend()
    },
    kindsNumber(a,b){
      this.kindsNumber = a.toUpperCase().trim()
    }
  },
  methods:{
    // 数据变动
    newSend(){
      this.sendData = {
        inputDate:this.inputDate,
        customerNo:this.customerNo,
        customerName:this.customerName,
        customerList: this.customerList,
        operatingMode:this.operatingMode,
        sellingPrice:this.sellingPrice,
        remark:this.remark
      }
    },

    search(){
      if (!this.customerNo) {
        this.$alert('客户不能为空', '', {
          confirmButtonText: '确定'
        })
        return
      }

      this.tableData1 = []
      this.tableData2 = []

      let params = {
        customerNo: this.customerNo,
        repairTime: this.inputDate,
        type: this.operatingMode,
        kindsNumber: this.kindsNumber,
        sellingPrice: this.sellingPrice,
        remark: this.remark
      }
      getCustomerRepair(params).then(res => {
        if (res.data.code == 200) {
          this.tableData1 = res.data.data.customerRepairChange
          this.tableData2 = res.data.data.customerRepairVOList
          this.tableData1.forEach(e => {
            e.time = e.repairTime.slice(0,10)
          })
          this.tableData2.forEach(e => {
            e.time = e.repairTime.slice(0,10)
          })

          this.$nextTick(() => {
            this.$refs.table.doLayout()
          })
        }
      })
    },
    modify(){
      if (JSON.stringify(this.tmpData) == '{}') {
        this.$alert('请选择一条数据再进行修改', '', {
          confirmButtonText: '确定'
        })
        return
      }
      this.tmpData.customerNo = this.customerNo
      this.tmpData.kindsNumber = this.kindsNumber
      this.tmpData.remark = this.remark
      this.tmpData.repairTime = this.inputDate
      this.tmpData.type = this.operatingMode
      this.tmpData.sellingPrice = this.sellingPrice

      // console.log(this.tmpData)
      update(JSON.stringify(this.tmpData)).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    saveRepair(a){
      // console.log(a)
      this.showRepair = false
      this.customerNo = a.customerNo
      this.customerName = a.customerName
      this.operatingMode = a.operatingMode
      this.remark = a.remark
    },

    // 客户编号失去焦点
    customerNoBlur(){
      if (this.customerNo != '') {
        for (const i of this.customerList) {
          if (this.customerNo == i.value) {
            this.customerName = i.label
            return
          }
        }
        this.$alert('无此客户编号', '', {
          confirmButtonText: '确定'
        })
        this.customerNo = ''
        this.customerName = ''
      } else {
        this.customerName = ''
      }
    },
    rowClick(row){
      // console.log(row)
      this.tmpData = row
      this.customerNo = row.customerNo
      this.kindsNumber = row.kindsNumber
      this.inputDate = row.repairTime
      this.sellingPrice = row.sellingPrice
      this.remark = row.remark
      this.operatingMode = row.type
      this.customerNoBlur()
    },

    getSummaries(param){
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const prop = column.property
        const values = data.map(item => Number(item[prop]))
        if (!values.every(value => isNaN(value))) {
          if (prop == 'outNumber' || prop == 'returnNumber') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (!sums[index]) {
              sums[index] = ''
            }
            let decimal = sums[index].toString().split('.')[1]
            if (decimal && decimal.length > 2) {
              sums[index] = sums[index].toFixed(2)
            }
          }
        }
      })
      return sums
    }
  },
  created(){
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    let jxAgentVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    let operatorVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    this.operator = operatorVal ? operatorVal[1] : null
   if(jxAgentVal){
    this.jxAgent = jxAgentVal[1] == 1 ? true : false
   }

    this.inpList = this.getInput()
    // 获取所有客户信息
    this.customerList = []
    getClient({limit:99999}).then(res => {
      // console.log(res)
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach(e => {
          if(e.stop != 1){
            this.customerList.push({value:e.no,label:e.name})
          }
        })
        if (this.jxAgent) {
          for (const i of this.customerList) {
            if (i.label == this.operator) {
              this.customerNo = i.value
              this.customerName = i.value
              break
            }
          }
        }
        this.newSend()
      }
    })
  }
}
</script>